<template>
  <div style="height:65vh;overflow: auto">
      <div>
          <el-input placeholder="请输入搜索信息"

                    v-model="input3"
                    class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择" >
            <el-option label="用户名" value="username"></el-option>
            <el-option label="姓名" value="true_name"></el-option>
            <el-option label="手机号" value="phone"></el-option>
            </el-select>
        </el-input>
      </div>
      
      <template>
        <el-table
            style="height:385px;width: 100%"
            :data="tableData"
            row-key="id"
            @select="handleSelectionChange"
            @select-all = "selectAll"
            v-loading="tableLoadding"
            ref="multipleTable"
            >
            <el-table-column
            type="selection"
            width="55"></el-table-column>
            <el-table-column
            prop="true_name"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="username"
            label="用户名">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号">
            </el-table-column>
        </el-table>
        </template>
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>

  </div>
</template>

<script>
export default {
    props:{
        list:Array
    },
    data(){
        return{
            input3: '',
            timer:-1,
            currentPage1:1,
            tableData: [],
            tableLoadding: true,
            total:0,
            select: 'username',
            searchInfo:{id:"",userName:"",name:"",phone:"",sex:"",user_code:"",department:[],role:[]}
        }
    },
    watch:{
        input3:function(){

           this.delays(() => {
               this.search();
           })
        }

    },
    mounted(){

        setTimeout(_=>{
            // console.log(this.info.searchUser)
            this.tableLoadding =  true;
            this.getUsersearch(this.currentPage1)
        },1000)
       
    },
    methods:{
        // closes(){
        //
        //     let store = this.$refs.multipleTable.store.states.selection
        //     store.forEach(element => {
        //         // console.log(element)
        //         if(this.list.length != 0){
        //             if(JSON.stringify(this.list).indexOf(JSON.stringify({true_name:element.true_name,id:element.id,username:element.username})) == -1){
        //                 this.list.push({true_name:element.true_name,id:element.id,username:element.username,phone:})
        //             }
        //         }else{
        //             this.list.push({true_name:element.true_name,id:element.id,username:element.username})
        //         }
        //     })
        //
        //     // this.isShow.state = false
        // },
        delays(action, delay = 600) {
            // let timer = -1;
            let they = this
            clearTimeout(they.timer);
            they.timer = setTimeout(() => {
                action();
            }, delay);

        },
        search(){

            // this.loading(true)
            this.searchInfo = {}
            switch(this.select){
                case "username" :
                    this.searchInfo.userName = this.input3
                    break;
                case "true_name" :
                    this.searchInfo.name = this.input3
                    break;
                case "phone" :
                    this.searchInfo.phone = this.input3
                    break;
            }
            // console.log(this.searchInfo)
             this.getUsersearch(this.currentPage1)
        },
        handleCurrentChange(){
            // console.log(222)
            this.getUsersearch(this.currentPage1)
        },
        toggleSelection(rows) {

            if (rows) {
                this.$nextTick(() => {
                    rows.forEach(row => {
                        // console.log(row)
                        this.$refs.multipleTable.toggleRowSelection(row,true);
                    })
                });

            }
        },
        selectAll(row){
            if(row.length == 0){
                console.log("取消勾选")
                for(let element of this.tableData){
                    for(let i = 0; i<this.list.length;i++){
                        if(this.list[i].id == element.id){
                            this.list.splice(i,1)
                        }
                    }
                }
            }else{
                console.log("勾选")
                for(let element of row){
                    if(JSON.stringify(this.list).indexOf(JSON.stringify({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})) == -1){
                        this.list.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})

                    }
                }
            }
        },
        getUsersearch(val){
            this.tableLoadding = true
            $.post("/user/searchUser",{info:JSON.stringify(this.searchInfo),"pre":val},Response => {
                if(Response.success){

                    this.currentPage1 = val
                    // if(Response.data.data.length  == 0){
                    //     this.tableLoadding =  false;
                    //     return;
                    // }
                    this.tableData = [];

                    (Response.data.data || []).forEach(element => {

                        this.tableData.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})

                    })

                    this.total = Response.data.totalRow.count

                    // console.log(this.list)
                    // console.log(JSON.stringify(this.list[0]), JSON.stringify(this.tableData[0]))
                    let selected = []
                    // 不知道为什么 this.toggleSelection(this.list) 不能用 this.toggleSelection([this.tableData[0]]) 可用
                    this.list.forEach( element =>{
                        this.tableData.forEach( val =>{
                            if(JSON.stringify(element) == JSON.stringify(val)){
                                // 将匹配的tableData内的值写入selected内
                                selected.push(val)
                            }
                        })

                    })
                    this.toggleSelection(selected)
                }else{
                    this.$message.error("搜索错误");
                }
                this.tableLoadding =  false;

            })
        },

         handleSelectionChange(val,ty) {
            console.log(val,ty)
             let item = 0
             if(ty != null){

                 for(let i = 0; i<this.list.length;i++){
                     if(this.list[i].id == ty.id){
                         // console.log(213)
                         this.list.splice(i,1)
                         item = 1
                     }
                 }
                 if(!item){
                     if(JSON.stringify(this.list).indexOf(JSON.stringify({true_name:ty.true_name,id:ty.id,username:ty.username,phone:ty.phone})) == -1){
                         this.list.push({true_name:ty.true_name,id:ty.id,username:ty.username,phone:ty.phone})

                     }

                 }
                 return ;
             }


             if(val){
                 val.forEach(element => {
                     if(this.list.length != 0){

                         if(JSON.stringify(this.list).indexOf(JSON.stringify({true_name:element.true_name,id:element.id,username:element.username})) == -1){
                             this.list.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})

                         }

                     }else{

                         this.list.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})
                     }



                 });

             }

        }
    }

}
</script>

<style scoped>
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
    .dialog-footer{
        display: flex;
        justify-content: flex-end;
    }
</style>